<template>
  <view class="rtl">
    <!-- 顶部导航 -->
    <lg-topbar bgColor="#fff" height="132rpx">
      <view class="bg-topbar-content">
        <view @click="onBack">
          <uv-icon name="arrow-left" size="25" color="#000000"></uv-icon>
        </view>
        <view>Payment</view>
        <view></view>
      </view>
    </lg-topbar>
    <view class="shopCartPlace">
      <view class="result">
        <uv-icon name="checkmark-circle-fill" color="#40d84e" size="65"></uv-icon>
        <view class="result_text">
          {{ t("Successful!") }}
        </view>
      </view>
      <view class="overBtn" @click="CheckOrder">
        {{ t("Check order detall") }}
      </view>
      <view class="footer">
        <view class="item" @click="onBack">
          {{ t("Back") }}
        </view>
        <view class="item" @click="goToView('/pages/index/index')">
          {{ t("Home") }}
          <uv-icon name="arrow-right" color="#fff"></uv-icon>
        </view>
      </view>
    </view>

  </view>

</template>

<script setup>
import {
  ref,
  defineExpose
} from "vue"
import {
  useI18n
} from "vue-i18n";
const {
  t
} = useI18n()
const show = ref(false);
const control = (bool) => {
  show.value = bool
}
const CheckOrder = () => {
  uni.navigateTo({
    url: "/pages/order/orderDetail"
  })
}

const goToView = (url) => {

  uni.switchTab({
    url: url,
    fail: () => {
      uni.navigateTo({
        url: url
      })
    }
  })

}
function onBack() {
  uni.navigateBack()
}
defineExpose({
  control
})
</script>

<style lang="scss" scoped>
@import "@/static/css/index.scss";

.bg-topbar-content {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  word-break: break-all;
  color: #000000;
  overflow: hidden;

  image {
    width: 86rpx;
    height: 86rpx;
  }

  .text-bold {
    font-weight: bold;
  }
}


.shopCartPlace {
  width: 100vw;

  height: calc(100vh - 132rpx);
  background: $primary-a;
  display: flex;
  flex-direction: column;
  color: #fff;

  .result {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 20% 100rpx 40rpx;

    .result_text {
      margin-top: 20rpx;
    }
  }

  .tip {
    margin: 0 50rpx;
  }

  .overBtn {
    border-radius: 10rpx;
    padding: 10rpx 20rpx;
    width: fit-content;
    margin: 40rpx auto;
    background-color: #1AAD19;
  }

  .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: $primary-b ;
    padding: 30rpx;
    border-radius: 6rpx 6rpx 0 0;
    box-sizing: border-box;

    .item {
      display: flex;
      align-items: flex-end;
    }
  }

}
</style>